{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
		<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}"/>
		<link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
		<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
		<script src="{% static 'js/bootstrap.bundle.js' %}" type="text/javascript" charset="utf-8"></script>
		<script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript" charset="utf-8"></script>

	</head>
<body>
		<!-- 导航 -->
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"
         style="background: linear-gradient(to right,#aa4b6b,#6b6b83,#3b8d99);">
        <a class="navbar-brand" href="#"><strong class="text-danger">SmartIdPhotos</strong></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="/index"><i class="fa fa-home"></i>首页 <span
                            class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/detail"><i class="fa fa-commenting"></i>案例</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/blog"><i class="fa fa-building"></i>博客</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tool"><i class="fa fa-phone"></i>工具箱</a>
                </li>
            </ul>
            <span class="navbar-text">

			  <p><i class="fa fa-phone-square"></i>问题反馈:1902612430</p>
		    </span>
        </div>
    </nav>
</header>

        <!--主体-->
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-4 text-center">智能换底</h1>
                <p class="lead text-center">------SUCCESS!------</p>
                <!--left-->
{#                <div class="col-sm">#}
{#                    <div class="card text-center" style="width: 18rem;">#}
{#                        <div class="card-body">#}
{#                            <h5 class="card-title text-center">处理图片</h5>#}
{#                            <img id="testImg" src="{{ data }}" class="card-img-top" alt="...">#}
{#                            <button type="button" class="btn btn-primary">下载</button>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}


                <div class="card text-center">
                    <div class="card-body">
                        <h3 class="card-title">处理图片</h3>
                        <img id="testImg" src="{{ data }}" class="card-img-top" alt="...">
                        <button type="button" class="btn btn-primary">下载</button>
                    </div>
                </div>









            </div>
        </div>



<!-- 页脚 -->
<footer id="task6">
    <div class="jumbotron jumbotron-fluid bg-light">
        <div class="container text-center">
            <h1 class="display-4 text-dark"><strong>ABOUT</strong></h1>
            <p class="lead"></p>
        </div>

        <div class="card-group border border-light">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>简介</strong></h5>
                    <p class="card-text">基于PYTHON的智能证件照系统，该站点为黔南民族师范学院2017级物联网工程专业学生李国发毕业设计，
                        该系统仅用于学习交流。同时也能给更多的同学提供一个功能丰富，简单免费的证件照智能换底工具。
                    </p>

                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>位置信息</strong></h5>
                    <div class="place" style="margin-left: 230px">
                        <span class="fa fa-map-marker"></span>
                        <span class="text">地址:黔南民族师范学院</span>
                    </div>
                    <div class="phone" style="margin-left: 230px">
                        <span class="fa fa-user"></span>
                        <span class="text">指导老师:罗文兴教授</span>
                    </div>
                    <div class="email" style="margin-left: 230px">
                        <span class="fa fa-envelope"></span>
                        <span class="text">邮箱:1902612430@qq.com</span>
                    </div>

                    <div class="weibo" style="margin-left: 230px">
                        <span class="fa fa-weibo"></span>
                        <span class="text">简书:pythonJam</span>
                    </div>
                </div>


            </div>
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title text-center"><strong>学习交流群</strong></h5>
                    <img src="{% static 'img/code.png' %}" style="width: 150px;height: 150px">
                    <p class="card-text text-center">请扫描上方二维码</p>
                </div>
            </div>
        </div>
        <p class="text-center text-secondary">Copyright<i class="fa fa-registered"></i>黔南民族师范学院2017级物联网工程专业
        </p>
    </div>
</footer>


<!--JS文件下载-->
        <script type="text/javascript">

           {#function download(url){#}
           {#     const xhr=new XMLHttpRequest();#}
           {#     xhr.open('GET',url)#}
           {#     xhr.responseType='blob'#}
           {#     xhr.send()#}
           {#     xhr.onload=function (){#}
           {#         const fileBlob=xhr.response;#}
           {#         console.log(fileBlob)#}
           {#         //将blob转成url地址#}
           {#         const fileUrl=URL.createObjectURL(fileBlob)#}
           {#         console.log(fileUrl)#}
           {#         //创建a标签#}
           {#         const elementA=document.createElement('a')#}
           {#         elementA.setAttribute('href',fileUrl)#}
           {#         elementA.innerHTML='下载'#}
           {#         elementA.setAttribute('download','')#}
           {#         elementA.click()#}
           {#         document.body.appendChild(elementA)#}
           {#     }#}
           {# }#}
           {##}
           {##}
           {#document.querySelector('button').onclick=function (){#}
           {#    const imgUrl=document.getElementById('testImg').src#}
           {#    console.log(imgUrl)#}
           {#    download(imgUrl)#}
           {##}

           document.querySelector('.btn').addEventListener('click', function () {
               downloadIamge('#testImg', '图片的名称')
           })

           function downloadIamge(selector, name) {
               var image = new Image()
               // 解决跨域 Canvas 污染问题
               // crossorigin 是HTML5中新增的<img>标签属性
               //　crossorigin属性有两个值可选：
               //anonymous:如果使用这个值的话就会在请求中的header中的带上origin属性，但请求不会带上cookie和其他的一些认证信息。
               //use-credentials:这个同时会在跨域请求中带上cookie和其他的一些认证信息。在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。可以通过server的配置文件来开启这个属性：server开启Access-Control-Allow-Credentials
               image.setAttribute('crossOrigin', 'anonymous')
               image.onload = function () {
                   var canvas = document.createElement('canvas')
                   canvas.width = image.width
                   canvas.height = image.height

                   var context = canvas.getContext('2d')
                   context.drawImage(image, 0, 0, image.width, image.height)
                   var url = canvas.toDataURL('image/png')
                   // 生成一个a元素
                   var a = document.createElement('a')
                   // 创建一个单击事件
                   var event = new MouseEvent('click')

                   // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                   a.download = name || '下载图片名称'
                   // 将生成的URL设置为a.href属性
                   a.href = url

                   // 触发a的单击事件
                   a.dispatchEvent(event);
               }
               image.src = document.querySelector(selector).getAttribute('src')
           }



        </script>



</body>



</html>




